<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>生态圈系统-费用结算</title>
  <link rel="icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
  <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="plugins/bootstrap-4.0.0/css/bootstrap.min.css" th:href="@{/plugins/bootstrap-4.0.0/css/bootstrap.min.css}" type="text/css" rel="stylesheet"/>
  <link href="css/materialize.css" th:href="@{/css/materialize.css}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="plugins/perfect-scrollbar/perfect-scrollbar.css" th:href="@{/plugins/perfect-scrollbar/perfect-scrollbar.css}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" type="text/css" rel="stylesheet"/>
  <link href="plugins/bootstrap-sweetalert/sweetalert.css" th:href="@{/plugins/bootstrap-sweetalert/sweetalert.css}" type="text/css" rel="stylesheet"/>
  <link href="css/style.css" th:href="@{/css/style.css}" type="text/css" rel="stylesheet"/>
  
  <style>
    .input-field {
      margin-bottom: 0px;
    }
  </style>
</head>
<body>
  <header>
    <nav class="" role="navigation" style="background-color: #f4f6f9;">
      <div class="nav-wrapper">
        <ul class="right hide-on-med-and-down">
          <!--
          <li><a class="blue-text waves-effect dropdown-trigger" href="#!" data-target="dropdown1" style="vertical-align: top;"><span th:if="${session.user!=null}" th:text="${session.user.username}">admin</span><i class="material-icons right">arrow_drop_down</i></a></li>
           -->
          <li><a class="grey-text waves-effect dropdown-trigger" href="#!" data-target="dropdown1" style="vertical-align: top;"><span sec:authentication="name">admin</span><i class="material-icons right">arrow_drop_down</i></a></li>
          <ul id="dropdown1" class="dropdown-content">
            <li><a href="#modal3" class="waves-effect grey-text modal-trigger">修改密码</a></li>
            <li><a th:href="@{/admin/logout}" class="waves-effect grey-text">退出登录</a></li>
          </ul>
        </ul>

        <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      </div>
    </nav>
  </header>

  <div th:replace="common/aside_admin :: aside"></div>

  <main class="" style="height: calc(100% - 48px); background-color: #f4f6f9;">
    <div class="row">
      <h6 style="margin: 0 0 0 15px;" id="page-title" active-menu="settlement-menu">费用结算</h6>
    </div>

    <div class="row white" style="margin: 0 15px; height: inherit;">
      <div class="col s12" style="height: inherit;"> <!-- Note that "m8 l9" was added -->
        <div class="">
          <form id="params">
            <div class="row" style="margin-bottom: 0;">
              <div class="input-field col s2">
                <select name="companyId">
                  <option value="" disabled selected>企业</option>
                  <option th:each="c : ${companies}" th:value="${c.id}"  th:text="${c.name}">企业1</option>
                </select>
              </div>
              <div class="input-field col s2">
	              <input type="text" name="startDate" id="startDate" class="validate" required>
	              <label for="startDate">开始日期</label>
	              <span class="helper-text" data-error="必填项" data-success="right"></span>
	            </div>
	            <div class="input-field col s2">
	              <input type="text" name="endDate" id="endDate" class="validate" required>
	              <label for="endDate">结束日期</label>
	              <span class="helper-text" data-error="必填项，结束日期不能早于开始日期" data-success="right"></span>
	            </div>
              <div class="input-field col s2"></div>
              <div class="input-field col s8">
                <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:settlePreview();" style="margin-right: 30px;"><i class="material-icons right"></i>查询</a>
              </div>
              <!-- <div class="col s2">
                <div style="position: relative; height: 70px;">
                </div>
              </div> -->
            </div>
          </form>
        </div>

        <div style="padding-top: 0; height: inherit;">

          <div id="tableHead">
            <table>
              <thead>
                <tr>
                  <th width="5%">序号</th>
                  <th width="7%">企业ID</th>
                  <th width="18%">企业名称</th>
                  <th width="7%">门店ID</th>
                  <th width="14%">门店名称</th>
                  <th width="14%">权益</th>
                  <th width="10%">结算数量</th>
                  <th width="10%">结算单价</th>
                  <th width="10%">结算金额</th>
                </tr>
              </thead>
            </table>
          </div>

          <div id="table_body_div" style="height: calc(100% - 95px); position: relative;">
            <table class="highlight">
              <thead>
                <tr>
                  <th class="no-padding" width="5%"></th>
                  <th class="no-padding" width="7%"></th>
                  <th class="no-padding" width="18%"></th>
                  <th class="no-padding" width="7%"></th>
                  <th class="no-padding" width="14%"></th>
                  <th class="no-padding" width="14%"></th>
                  <th class="no-padding" width="10%"></th>
                  <th class="no-padding" width="10%"></th>
                  <th class="no-padding" width="10%"></th>
                </tr>
              </thead>
              <tbody id="tbody">
                <!-- <tr>
                  <td>1</td>
                  <td>鲁信</td>
                  <td>中秋大闸蟹99元包邮</td>
                  <td>20</td>
                  <td>￥10</td>
                  <td>￥200</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>鲁信</td>
                  <td>中秋大闸蟹99元包邮</td>
                  <td>100</td>
                  <td>￥10</td>
                  <td>￥2000</td>
                </tr> -->
              </tbody>
            </table>
          </div>
          <div id="settlement-btn" class="row hide" style="margin-bottom: 0;">
            <div class="hide">
              <input type="hidden" name="startDate" id="startDateTemp">
              <input type="hidden" name="endDate" id="endDateTemp">
            </div>
            <div class="input-field col s7">
              <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:printSettlePreview();" style="margin-right: 30px;"><i class="material-icons right"></i>打印</a>
              <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:exportSettlePreview();" style="margin-right: 10px;"><i class="material-icons right"></i>导出</a>
              <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:settle();" style="margin-right: 10px;"><i class="material-icons right"></i>结算</a>
            </div>
          </div>
        </div>

      </div>

  	</div>
  </main>

  <div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-header">
      <h6>选择结算日期</h6>
      <a class="btn-flat modal-close"><i class="material-icons">close</i></a>
    </div>
    <div class="modal-content" style="border: unset; border-radius: 0;">
      <div class="row" style="width: 100%;">
        <form class="col s12">
          <div class="row">
            <div class="col s6 input-field">
              <input type="text" name="startDate" id="startDate1" class="validate" required>
              <label for="startDate1">开始日期</label>
              <span class="helper-text" data-error="必填项" data-success="right"></span>
            </div>
            <div class="col s6 input-field">
              <input type="text" name="endDate" id="endDate1" class="validate" required>
              <label for="endDate1">结束日期</label>
              <span class="helper-text" data-error="必填项，结束日期不能早于开始日期" data-success="right"></span>
            </div>
          </div>
          <input type="reset" style="display:none;" />
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-light btn-flat" style="margin-right: 10px;">取消</a>
      <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action" style="margin-right: 10px;" onclick="settlePreview()">确认</button>
    </div>
  </div>
  
  <div id="modal2" class="modal modal-fixed-footer">
    <div class="modal-header">
      <h6>打印</h6>
      <a class="btn-flat modal-close"><i class="material-icons">close</i></a>
    </div>
    <div class="modal-content" style="border: unset; border-radius: 0;">
      <div class="row" style="width: 100%;">
        <div class="col s12" id="printTable">
          
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-light btn-flat" style="margin-right: 10px;">取消</a>
      <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action" style="margin-right: 10px;" onclick="print()">确认</button>
    </div>
  </div>

  <!-- <footer class="white page-footer teal">
    <div class="footer-copyright">
      <div class="black-text container">
      Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
      </div>
    </div>
  </footer> -->

  <div th:replace="common/update_pwd :: #modal3"></div>

  <!--  Scripts-->
  <script src="js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
  <script src="js/materialize.js" th:src="@{/js/materialize.js}"></script>
  <script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js" th:src="@{/plugins/perfect-scrollbar/perfect-scrollbar.min.js}"></script>
  <script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" th:src="@{/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
  <script src="plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" th:src="@{/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" charset="UTF-8"></script>
  <script src="plugins/bootstrap-sweetalert/sweetalert.min.js" th:src="@{/plugins/bootstrap-sweetalert/sweetalert.min.js}"></script>
  <script src="js/common.js" th:src="@{/js/common.js}"></script>
  <script src="js/jquery.PrintArea.js" th:src="@{/js/jquery.PrintArea.js}"></script>
  <script>
    var dt = new Date();
    dt.setMinutes(dt.getMinutes() - dt.getTimezoneOffset() - 1440);

	  $(document).ready(function() {
		  $('#endDate').datepicker({
		    format : "yyyy-mm-dd",
		    language : "zh-CN",
		    autoclose : true,
		    endDate: dt
		  }).on('hide', function(e) {
		    M.updateTextFields();
		    M.validate_field($(this));
		  });

		  $('#startDate').datepicker({
	      format : "yyyy-mm-dd",
	      language : "zh-CN",
	      autoclose : true,
	      endDate: dt
	    }).on('hide', function(e) {
	      M.updateTextFields();
	      M.validate_field($(this));
	    });

	  });

    function selectDate() {
    	var companyId = $('select[name="companyId"]').val();
    	if(companyId == null) {
    		swal("请选择企业!", {
          icon: "error",
        });
    		return;
    	}
    	$('#modal1').modal('open');
    }

    function settlePreview() {
    	var companyId = $('select[name="companyId"]').val();
      if(companyId == null) {
        swal("请选择企业!", {
          icon: "error",
        });
        return;
      }
      
      M.validate_field($('#startDate'));
      M.validate_field($('#endDate'));
      var startDate = $('#startDate').val();
      var endDate = $('#endDate').val();
      var d1 = new Date(startDate.replace(/\-/g, "\/"));
      var d2 = new Date(endDate.replace(/\-/g, "\/"));
      if(startDate != "" && endDate != "" && d1 > d2) {
        //$('#modal1 input[name="startDate"]').addClass("invalid");
        $('#endDate').addClass("invalid");
      }
      var invalid_input_elems = $('#params input.invalid');
      if(invalid_input_elems.length > 0) {
        return;
      }

    	var companyId = $('select[name="companyId"]').val();
      $.ajax({
        url: "/kangchenjunga/api/v1/statements/companies/" + companyId + "/settlePreview/",
        data: "startDate=" + $("#startDate").val() + "&endDate=" + $("#endDate").val(),
        type: "POST",
        success: function(data) {
        	console.log(data);
        	var table_str = '';
        	var totalQuantity = 0;
        	var totalAmount = 0;
        	for(var i = 0; i < data.details.length; i++) {
        		table_str += '<tr>'
                      +  '<td title="' + (i + 1) + '">' + (i + 1) + '</td>'
                      +  '<td title="' + data.details[i].companyId + '">' + data.details[i].companyId + '</td>'
                      +  '<td title="' + data.details[i].companyName + '">' + data.details[i].companyName + '</td>'
                      +  '<td title="' + data.details[i].storeId + '">' + data.details[i].storeId + '</td>'
                      +  '<td title="' + data.details[i].storeName + '">' + data.details[i].storeName + '</td>'
                      +  '<td title="' + data.details[i].activityTitle + '">' + data.details[i].activityTitle + '</td>'
                      +  '<td title="' + data.details[i].quantity + '">' + data.details[i].quantity + '</td>'
                      +  '<td title="￥' + data.details[i].price + '">￥' + data.details[i].price + '</td>'
                      +  '<td title="￥' + data.details[i].amount + '">￥' + data.details[i].amount + '</td>'
                      +  '</tr>';
        		totalQuantity += data.details[i].quantity;
        		totalAmount += data.details[i].amount;
        	}
        	table_str += '<tr>'
                +  '<td>总</td>'
                +  '<td>计：</td>'
                +  '<td></td>'
                +  '<td></td>'
                +  '<td></td>'
                +  '<td></td>'
                +  '<td>' + totalQuantity + '</td>'
                +  '<td></td>'
                +  '<td>￥' + totalAmount + '</td>'
                +  '</tr>';
          $('#tbody').html(table_str);
          $('#modal1').modal('close');
          $('#settlement-btn').removeClass('hide');
          $("#startDateTemp").val($("#startDate").val());
          $("#endDateTemp").val($("#endDate").val());
          $("#modal1 input[type=reset]").trigger("click");
        },
        error: function(data) {
            swal({
                title: "结算失败!",
                text: data.responseJSON.message,
                icon: "error",
              });
            }
      });
    }

    function settle() {
      var companyId = $('select[name="companyId"]').val();
      $.ajax({
        url: "/kangchenjunga/api/v1/statements/companies/" + companyId + "/settle/",
        data: "startDate=" + $("#startDateTemp").val() + "&endDate=" + $("#endDateTemp").val(),
        type: "POST",
        success: function(data) {
          //console.log(data);
          swal("结算完成!", {
            icon: "success",
          });
          $('select[name="companyId"]').val("");
          window.location.reload();
        },
        error: function(data) {
          swal({
            title: "结算失败!",
            text: data.responseJSON.message,
            icon: "error",
          });
        }
      });
    }

    function exportSettlePreview() {
    	var companyId = $('select[name="companyId"]').val();
    	window.location.href = "/kangchenjunga/api/v1/statements/companies/" + companyId + "/settlePreview/export?"
    			+ "startDate=" + $("#startDateTemp").val() + "&endDate=" + $("#endDateTemp").val();
    }
    
    function printSettlePreview() {
    	$('#modal2').modal('open');
    	$('#printTable').empty();
    	$('#printTable').append($('#tableHead').clone());
    	$('#printTable').append($('#table_body_div').clone().css('height', 'auto'));
    }
    
    function print() {
    	$('#printTable').printArea();
    }

  </script>

  </body>
</html>
